<template>
    <Transition>
        <div class="contain" v-if="flag">
            <div class="header flex">
                <div class="goHome flex">
                    <div @click="clear">
                        <el-icon>
                            <ArrowLeft />
                        </el-icon>
                    </div>
                    <p class="title">{{ title }}</p>
                </div>
                <button class="submit" @click="addHandle" v-loading.fullscreen.lock="fullscreenLoading">提交</button>
            </div>
            <div class="main">
                <div class="inputBox">
                    <p class="inputName">分类名称</p>
                    <!-- <input type="text" class="myInput" placeholder="请填写物资分类ID" v-model="form.categoriesId"> -->
                    <el-select v-model="form.categoriesId" placeholder="请选择分类名称" class="select" clearable filterable>
                        <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </div>
                <!-- <div class="inputBox">
                    <p class="inputName">流水号</p>
                    <input type="text" class="myInput" placeholder="请填写流水号" v-model="form.code">
                </div> -->
                <!-- <div class="inputBox">
                    <p class="inputName">国家医保代码</p>
                    <input type="text" class="myInput" placeholder="请填写国家医保代码" v-model="form.nationalInsuranceCode">
                </div>
                <div class="inputBox">
                    <p class="inputName">国家医保名称</p>
                    <input type="text" class="myInput" placeholder="请填写国家医保名称" v-model="form.nationalInsuranceName">
                </div>
                <div class="inputBox">
                    <p class="inputName">收费等级</p>
                    <input type="text" class="myInput" placeholder="请填写收费等级" v-model="form.chargeLevel">
                </div> -->
                <div class="inputBox">
                    <p class="inputName">物资名称</p>
                    <input type="text" class="myInput" placeholder="请填写物资名称" v-model="form.name">
                </div>
                <div class="inputBox">
                    <p class="inputName">规格</p>
                    <input type="text" class="myInput" placeholder="请填写规格" v-model="form.specification">
                </div>
                <div class="inputBox">
                    <p class="inputName">型号</p>
                    <input type="text" class="myInput" placeholder="请填写型号" v-model="form.model">
                </div>
                <!-- <div class="inputBox">
                    <p class="inputName">中标编码</p>
                    <input type="text" class="myInput" placeholder="请填写中标编码" v-model="form.tenderCode">
                </div>
                <div class="inputBox">
                    <p class="inputName">产地</p>
                    <input type="text" class="myInput" placeholder="请填写产地" v-model="form.origin">
                </div> -->
                <div class="inputBox">
                    <p class="inputName">库房分批</p>
                    <!-- <input type="text" class="myInput" placeholder="请填写库房分批" v-model="form.warehouseBatch"> -->
                    <el-select v-model="form.warehouseBatch" placeholder="请选择是否库房分批" class="select" clearable
                        filterable>
                        <el-option label="是" value="是" />
                        <el-option label="否" value="否" />
                    </el-select>
                </div>
                <div class="inputBox">
                    <p class="inputName">单位</p>
                    <input type="text" class="myInput" placeholder="请填写单位" v-model="form.unit">
                </div>
                <div class="inputBox">
                    <p class="inputName">上次采购价</p>
                    <input type="number" class="myInput" placeholder="请填写上次采购价" v-model="form.lastPurchasePrice">
                </div>
                <div class="inputBox">
                    <p class="inputName">最后售价</p>
                    <input type="number" min="0" class="myInput" placeholder="请填写最后售价" v-model="form.finalSellingPrice">
                </div>
                <!-- <div class="inputBox">
                    <p class="inputName">可用数量</p>
                    <input type="number" class="myInput" placeholder="请填写可用数量" v-model="form.availableQuantity">
                </div> -->
                <div class="inputBox">
                    <p class="inputName">入库数量</p>
                    <input type="number" min="0" class="myInput" placeholder="请填写入库数量" v-model="form.stockQuantity">
                </div>
                <div class="inputBox">
                    <p class="inputName">库存金额</p>
                    <input type="number" min="0" class="myInput" placeholder="请填写库存金额" v-model="form.stockAmount">
                </div>
                <div class="inputBox">
                    <p class="inputName">库存差价</p>
                    <input type="number" min="0" class="myInput" placeholder="请填写库存差价"
                        v-model="form.stockPriceDifference">
                </div>
                <div class="inputBox">
                    <p class="inputName">上次供应商</p>
                    <input type="text" class="myInput" placeholder="请填写上次供应商" v-model="form.lastSupplier">
                </div>
                <div class="inputBox">
                    <p class="inputName">物资阈值</p>
                    <input type="number" min="0" class="myInput" placeholder="请填写上次供应商" v-model="form.warningThreshold">
                </div>



                <!-- <div class="inputBox">
                    <p class="inputName">分类描述</p>
                    <textarea class="myText" placeholder="请填写分类描述" v-model="form.description"></textarea>
                </div> -->
            </div>
        </div>
    </Transition>
</template>

<script>
import { httpService } from "@/utils/httpService";
import Icon from '@/components/Icon.vue';
import { ArrowLeft } from "@element-plus/icons-vue";
import { ElMessage, ElForm, ElLoading } from "element-plus";

export default {
    name: "leftMenu",
    components: { Icon, ArrowLeft, ElMessage, ElForm, ElLoading },
    data() {
        return {
            flag: false,
            title: "",
            form: {
                // id: "",
                categoriesId: "",
                // code: "",
                // nationalInsuranceCode: "",
                // nationalInsuranceName: "",
                // chargeLevel: "",
                name: "",
                specification: "",
                model: "",
                // tenderCode: "",
                // origin: "",
                warehouseBatch: "",
                unit: "",
                lastPurchasePrice: "",
                finalSellingPrice: "",
                availableQuantity: "",
                stockQuantity: "",
                stockAmount: "",
                stockPriceDifference: "",
                lastSupplier: "",
                warningThreshold: "",
            },
            formRules: {
                categoriesId: "请填写物资分类ID",
                // code: "请填写物资编码",
                // nationalInsuranceCode: "请填写国家医保代码",
                // nationalInsuranceName: "请填写国家医保名称",
                // chargeLevel: "请填写收费等级",
                name: "请填写物资名称",
                specification: "请填写规格",
                model: "请填写型号",
                // tenderCode: "请填写中标编码",
                // origin: "请填写产地",
                warehouseBatch: "请填写库房分批",
                unit: "请填写单位",
                lastPurchasePrice: "请填写上次采购价",
                finalSellingPrice: "请填写最后售价",
                availableQuantity: "请填写可用数量",
                stockQuantity: "请填写入库数量",
                stockAmount: "请填写库存金额",
                stockPriceDifference: "请填写库存差价",
                lastSupplier: "请填写上次供应商",
                warningThreshold: "请填写物资阈值",
            },
            categoryList: [],
            fullscreenLoading: false,
        };
    },
    computed: {},
    mounted() {

    },
    methods: {
        addHandle() {
            


            this.fullscreenLoading = true
            let params = new FormData()

            params.append("categoriesId", this.form.categoriesId ? this.form.categoriesId : "")
            // params.append("code", this.form.code ? this.form.code : "")
            // params.append("nationalInsuranceCode", this.form.nationalInsuranceCode ? this.form.nationalInsuranceCode : "")
            // params.append("nationalInsuranceName", this.form.nationalInsuranceName ? this.form.nationalInsuranceName : "")
            // params.append("chargeLevel", this.form.chargeLevel ? this.form.chargeLevel : "")
            params.append("name", this.form.name ? this.form.name : "")
            params.append("specification", this.form.specification ? this.form.specification : "")
            params.append("model", this.form.model ? this.form.model : "")
            // params.append("tenderCode", this.form.tenderCode ? this.form.tenderCode : "")
            // params.append("origin", this.form.origin ? this.form.origin : "")
            params.append("warehouseBatch", this.form.warehouseBatch ? this.form.warehouseBatch : "")
            params.append("unit", this.form.unit ? this.form.unit : "")
            params.append("lastPurchasePrice", this.form.lastPurchasePrice ? this.form.lastPurchasePrice : "")
            params.append("finalSellingPrice", this.form.finalSellingPrice ? this.form.finalSellingPrice : "")
            params.append("availableQuantity", this.form.availableQuantity ? this.form.availableQuantity : "")
            params.append("stockQuantity", this.form.stockQuantity ? this.form.stockQuantity : "")
            params.append("stockAmount", this.form.stockAmount ? this.form.stockAmount : "")
            params.append("stockPriceDifference", this.form.stockPriceDifference ? this.form.stockPriceDifference : "")
            params.append("lastSupplier", this.form.lastSupplier ? this.form.lastSupplier : "")
            params.append("warningThreshold", this.form.warningThreshold ? this.form.warningThreshold : "")

            let userInfo = sessionStorage.getItem('user')
            userInfo = JSON.parse(userInfo);
            let campus = 2;
            if(userInfo&&userInfo.teacherNumber=='240085'){
                campus = 2;
            }else{
                campus = 1;
            }

            if (this.form.id) {
                params.append("id", this.form.id)
                httpService("/javaApi/materials/edit", params, "post").then((data) => {
                    this.fullscreenLoading = false
                    if (data.code == 200) {
                        ElMessage.success("修改成功");
                        this.clear();
                        this.$parent.getList();
                    } else {
                        ElMessage.error("修改失败");
                    }
                });
            } else {
                params.append("campus", campus)

                httpService("/javaApi/materials/add", params, "post").then((data) => {
                    this.fullscreenLoading = false
                    if (data.code == 200) {
                        ElMessage.success("保存成功");
                        this.clear();
                        this.$parent.getList();
                    } else {
                        ElMessage.error(data.message);
                    }
                });
            }

        },
        clear() {
            this.flag = false
            this.form.id = ""
            this.form.categoriesId = ""
            this.form.code = ""
            this.form.nationalInsuranceCode = ""
            this.form.nationalInsuranceName = ""
            this.form.chargeLevel = ""
            this.form.name = ""
            this.form.specification = ""
            this.form.model = ""
            this.form.tenderCode = ""
            this.form.origin = ""
            this.form.warehouseBatch = ""
            this.form.unit = ""
            this.form.lastPurchasePrice = ""
            this.form.finalSellingPrice = ""
            this.form.availableQuantity = ""
            this.form.stockQuantity = ""
            this.form.stockAmount = ""
            this.form.stockPriceDifference = ""
            this.form.lastSupplier = ""
            this.form.warningThreshold = ""

        },
        queryById(id) {
            httpService("/javaApi/materials/queryById", { id: id }, "get").then((data) => {
                console.log(data);
                if (data) {
                    this.form = data
                }
            });
        },

        getCategoryList() {
            httpService("/javaApi/materialCategories/list/1/100", {}, "get").then((data) => {
                console.log(data);
                if (data.list) {
                    this.categoryList = data.list
                }
            });
        },

    },
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.flex {
    display: flex;
    align-items: center;
}

.contain {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 99;
}

.header {
    justify-content: space-between;
    height: 70px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.goHome {
    margin-left: 20px;
}

.goHome div {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 26px;
}

.goHome p {
    color: #000000;
    font-size: 18px;
    font-weight: bold;
}

.submit {
    width: 77px;
    height: 38px;
    background-color: #6F72FF;
    border-radius: 10px;
    border: none;
    margin-right: 161px;
    color: #fff;
    font-size: 15px;
}

.main {
    width: 50vw;
    height: calc(100vh - 105px);
    padding: 23px 39px 0 39px;
    margin: 10px auto 0;
    box-shadow:
        10px 0 10px -10px rgba(0, 0, 0, 0.18),
        -10px 0 10px -10px rgba(0, 0, 0, 0.18);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: flex-start;
    overflow-y: auto;
}

.inputBox {
    /* width: calc((100% - 100px) / 3); */
    width: calc((100% - 100px) / 2);
    margin-bottom: 15px;
}

.inputName {
    color: #5B686D;
    font-size: 15px;
    margin-bottom: 5px;
}

.myInput {
    width: calc(100% - 19px);
    height: 42px;
    border-radius: 10px;
    border: 1px solid #D6DBE2;
    outline: none;
    font-size: 15px;
    color: #000;
    padding-left: 19px;
}

.myInput::placeholder {
    color: #A9B6BB;
}

.myText {
    width: calc(100% - 36px);
    height: 150px;
    border-radius: 10px;
    border: 1px solid #D6DBE2;
    resize: none;
    outline: none;
    padding: 18px;
    font-size: 15px;
    color: #000;
}

.myText::placeholder {
    color: #A9B6BB;
}


input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 对于Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

.select ::v-deep .el-tooltip__trigger {
    width: 100%;
    height: 44px;
    border-radius: 10px;
    cursor: pointer;
}


.el-select-dropdown__item {
    padding-left: 15px;
}

::v-deep .el-select {
    --el-color-primary: #D6DBE2;
}




.v-enter-active,
.v-leave-active {
    transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}
</style>